<template>
        <el-container class="home_comtainer">
            <el-header height="70px">
                <v-header/>
            </el-header>
            <el-container>
                    <el-aside :width="collapse? borderMinWidth : borderMaxWidth">
                      <v-nav-menu/>
                    </el-aside>
                    <el-main>
                      <v-main/>
                      <el-footer>
                      </el-footer>
                    </el-main>

            </el-container>

        </el-container>
</template>

<script>
import vHeader from './Header.vue';
import vNavMenu from './NavMenu.vue';
import vMain from './Main.vue';

import bus from './bus';
export default {
    name:'Home',
    data(){
        return{
          borderMinWidth:'70px',
          borderMaxWidth:'211px',
          collapse:true
        }
    },
    components:{
        vHeader,vNavMenu,vMain
    },
  created(){
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on('collapse', msg => {
      this.collapse = msg;
      console.log("调用了created方法");

    });
  }
}
</script>
<style scoped>
  .home_comtainer{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .el-aside{
    background-color: #324157;
  }
</style>
